<template>
	<view>
		<view class="head-bg" :style="{
				'background': `url(${getImg('wallet-bg')}) no-repeat center top`,
			}">
			<head-nav bgColor="rgba(0,0,0,0)" title="我的钱包"></head-nav>

			<view class="flex flex-col flex-center mar-t100">

				<view class="balancebox flex flex-col flex-center">
					<view class="tittext mar-b12">账户余额</view>
					<view class="balancetext mar-b40"><span>￥</span>1000.00</view>
					<view class="flex flex-a ">
						<view class="ctttext" @click="$goRouter('/pages/my/pages/expenseabout?type=0')">充值记录</view>
						<view class="intervalline"></view>
						<view class="ctttext" @click="$goRouter('/pages/my/pages/expenseabout?type=1')">消费明细</view>
						<view class="intervalline"></view>
						<view class="ctttext" @click="$goRouter('/pages/my/pages/expenseabout?type=2')">退款记录</view>
					</view>
				</view>

				<view class="flex flex-col pad24 mar-t24 rechargecss">
					<view class="tittext">余额充值</view>

					<view class="flex mar-b20">
						<view class="flex-1 regebox flex-center">¥100.00</view>
						<view class="flex-1 regebox flex-center">¥100.00</view>
						<view class="flex-1 regebox flex-center">¥100.00</view>
					</view>
					<view class="flex mar-b20">
						<view class="flex-1  regebox flex-center">¥100.00</view>
						<view class="flex-1  regebox flex-center">¥100.00</view>
						<view class="flex-1  regebox flex-center">¥100.00</view>
					</view>

					<view class="flex flex-a regeboxzx">
						<view>￥</view>
						<u--input placeholder="输入自定义金额" border="none"></u--input>
					</view>
				</view>

				<view class="czbtn flex flex-center mar-t96">立即充值</view>

			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.head-bg {
		min-height: 400rpx;
		background-size: 100% 400rpx !important;
	}

	.balancebox {
		width: 670rpx;
		height: 296rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 8rpx 6rpx 0rpx rgba(239, 239, 239, 0.4);
		border-radius: 24rpx 24rpx 24rpx 24rpx;

		.tittext {
			width: 112rpx;
			height: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}

		.balancetext {
			// width: 284rpx;
			// height: 84rpx;
			font-family: MiSans, MiSans;
			font-weight: 600;
			font-size: 40rpx;
			color: #000000;
			text-align: left;
			font-style: normal;
			text-transform: none;

			span {
				font-size: 30rpx;
			}

		}

		.intervalline {
			width: 2rpx;
			height: 32rpx;
			margin: 0 54rpx 0 54rpx;
			background: #E6E6E6;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
		}

		.ctttext {
			width: 112rpx;
			height: 40rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

	}


	.rechargecss {
		width: 100vw;

		.tittext {
			margin: 0rpx 12rpx 18rpx 12rpx;
			width: 128rpx;
			height: 44rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #111111;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}

		.regebox {
			margin: 12rpx;
			width: 218rpx;
			height: 104rpx;
			background: #F5F5F5;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #000000;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
		
		.regeboxzx{
			width: 702rpx;
			height: 104rpx;
			background: #F5F5F5;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #000000;
			text-align: center;
			font-style: normal;
			text-transform: none;
			padding: 28rpx 44rpx;
			margin-top: 12rpx;
		}

	}

	.czbtn {
		width: 528rpx;
		height: 92rpx;
		background: #FF7171;
		border-radius: 240rpx 240rpx 240rpx 240rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}
</style>
<style>
	page {
		background: #fff;
	}
</style>